<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20">
                    <div class="user-info">
                        <img src="../../assets/img/mm.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{userInfo.userName}}</div>
                            <div>{{userInfo.userId}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                      <span class="title-name">真实姓名：</span>
                      <span>{{userInfo.realName}}</span>
                    </div>
                    <div class="user-info-list">
                      <span class="title-name">性别：</span>
                      <span>{{userInfo.sex}}</span>
                    </div>
                    <!--<div class="user-info-list">
                      <span class="title-name">密码：</span>
                      <span>{{userInfo.usePwd}}</span>
                    </div>-->
                    <div class="user-info-list">
                      <span class="title-name">出生日期：</span>
                      <span>{{userInfo.birth}}</span>
                    </div>
                    <div class="user-info-list">
                      <span class="title-name">地址：</span>
                      <span>{{userInfo.address}}</span>
                    </div>
                    <div class="user-info-list">
                      <span class="title-name">邮箱地址：</span>
                      <span>{{userInfo.email}}</span>
                    </div>
                    <div class="user-info-list">
                      <span class="title-name">身份证号：</span>
                      <span>{{userInfo.idCard}}</span>
                    </div>
                    <div class="user-info-list">
                      <span class="title-name">电话号码：</span>
                      <span>{{userInfo.phone}}</span>
                    </div>
                    <div class="user-info-list">
                      <span class="title-name">所属班级：</span>
                      <span>{{userInfo.className}}</span>
                    </div>
                    <!--<div class="user-info-list">
                      <span class="title-name">所属部门：</span>
                      <span>{{ userInfo.departmentName }}</span>
                    </div>-->
                    <!--<div class="user-info-list">
                      <span class="title-name">所属部门ID：</span>
                      <span>{{userInfo.departmentId}}</span>
                    </div>-->
                    <!--<div class="user-info-list">
                      <span class="title-name">创建时间：</span>
                      <span>{{userInfo.createTime}}</span>
                    </div>-->
                    <div class="user-info-list">
                      <span class="title-name">修改时间：</span>
                      <span>{{userInfo.updateTime}}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
  name:'personview',
  data(){
    return {
    	userInfo : {
    		address: "广东省湛江市",
    		birth: "1997-08-21",
    		classId: "1",
    		className: "三班",
    		createTime: "2020-03-19T10:01:39.971Z",
    		departmentId: "2",
    		departmentName: "办公室",
    		email: "9696996969@qq.com",
    		idCard: "440900000000000000",
    		phone: "15731838339",
    		realName: "麦广善",
    		sex: "女",
    		updateTime: "2020-03-20T10:03:59.971Z",
    		usePwd: "a2983277940",
    		userId: '201641404229',
    		userName: "麦导",
		    role:'系统管理员',
    	}

    }
  },
  created() {
        this.getData();
  },
   methods: {
      async getData(){
        let res = await this.$Http.getUserInfo();
//      
//      const {model} = this.$refs[userInfo]
//      console.log(model);
        
        console.log(res.data);
        this.userInfo = res.data;
        
    },
   }

}
</script>
<style scoped>
  .user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-info>img{
  width: 120px;
  height: 120px;
}

.title-name{
  display: inline-block;
  width: 120px;
}

.user-avator {
    width: 80px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}
</style>